<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>优惠券列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./css/inputC.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 引入layui.css -->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">
    <!-- 引入layui.js -->
    <script scr="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <!--表单信息（搜索条件）-->
      <div class="layui-form">
          <div class="layui-inline">
              <select name="coupontype" id="coupontype" placeholder="优惠券类型">
                  <option value="现金券">现金券</option>
                  <option value="折扣券">折扣券</option>
              </select>
          </div>

          <div class="layui-inline">
              <input type="text" name="couponname" id="couponname" placeholder="优惠券名称"  class="layui-input" >
          </div>

          <div class="layui-inline">
            <button id="getCoupon" class="layui-btn" lay-submit lay-filter="searchCoupon">
              <i class="layui-icon layui-icon-search"></i>
            </button>
          </div>

        </div>
      </div>
              <xblock>
                <button class="layui-btn layui-btn-normal" onclick="x_admin_show('添加优惠券','./coupon-add.html',1200,600)" id="addCoupon"><i class="layui-icon layui-icon-add-1"></i>新增优惠券</button>
              </xblock>
      <script type="text/html" id="table-operation">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
        {{# if(d.couponstate == 0) { }}
        <a class="layui-btn layui-btn layui-btn-xs" lay-event="issue">发放</a>
        {{# } else { }}
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="paused">暂停</a>
        {{# } }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      </script>

      <div style="text-align: center">
        <!--数据表格位置-->
        <table id="data-table" lay-filter="data-table"></table>
      </div>

    </div>


    <script>

      layui.use(['form','table','laypage','layer','laydate'], function() {
        var $ = layui.jquery
                ,form = layui.form,table = layui.table,laypage=layui.laypage,layer=layui.layer,laydate=layui.laydate;


    let couponTable=table.render({
          elem: "#data-table",
          url: "/coupon/getAllCoupon",//请求地址
          page: true, //开启分页
          id:"idTest",
          // width:1250,
          cols: [[
              {field: "cid",  title: "ID",hide:true},
              {field: "coupontype",  title: "类型",align: "center",width: 150},
              {field: "couponname", title: "优惠券名称",align: "center",width: 150},
              {field: "couponimg", title: "优惠券图片",style:"height:40px",align: "center", templet: "#imgtmp",width: 150},
              {field: 'coupongoods', title: '可用商品', align: 'center',width: 150},
              {field: "couponstate", title: "状态",align: "center",templet: "#couponStateTemplet",width: 150},
              {field: "coupontoprice", title: "满多少元",align: "center",width: 150,hide:true},
              {field: "couponprice", title: "减多少元",align: "center",width: 150,hide:true},
              {field: "coupondiscount", title: "价额",align: "center",width: 150,templet: "#coupondiscount"},
              {field: "coupondateday", title: "有效天数",sort:true, align: "center",width: 150,hide:true},
              {field: "coupondaterange", title: "有效日期",sort:true, align: "center",width: 190,hide:true},
              {field: "coupondaterange", title: "有效时间",sort:true, align: "center",width: 190,templet: "#couponTimeTmp"},
              {field: "couponlimit", title: "每人限领",sort:true, align: "center",width: 100},
              {field: "couponnum", title: "发行总量",sort:true, align: "center",width: 100},
              {field: "couponreceive", title: "已领取",sort:true, align: "center",width: 100},
              {field: "couponaddtime", title: "添加时间",sort:true, align: "center",width: 150},
              {field: "coupondesc", title: "优惠券描述",sort:true, align: "center",width: 150},
              {title: "操作", align: "center",toolbar: "#table-operation",width:200,}
            ]],
          done:function (res, curr, count) {
              console.log("coupon数据------------>")
              console.log(res)
          },
        });

          form.on('submit(searchCoupon)', function (data) {
              var filed = data.field;
              console.log(data.field)
              console.log(filed)
              table.reload('idTest', {
                  where:filed
              });
              return false;
          });


        /*
        * 右侧工具类编辑、删除、查看等的点击事件函数
        * */
          table.on('tool(data-table)', function(obj) { //注：tool 是工具条事件名，data-table 是 table 原始容器的属性 lay-filter="对应的值"
              var data = obj.data; //获得当前行数据
              var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
              var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
              console.log(data)
              var cid = data.cid;
              if (layEvent === 'issue') { //发行
                  //do somehing
                  $.ajax({
                      type: 'GET',
                      url: "/coupon/updateCouponState/" + cid + "/" + 1,
                      processData: false,
                      contentType: false,
                      async: false,
                      success: function (res) {
                          console.log(res);
                          layer.msg('优惠券已发行', {icon: 1});
                          couponTable.reload()
                      }
                  })
              } else if (layEvent === 'del') { //删除
                  layer.confirm('真的删除行么', function (index) {
                      // layer.close(index);
                      //向服务端发送删除指令
                      $.ajax({
                          type: 'GET',
                          url: '/coupon/delCoupon/'+data.cid,
                          processData: false,
                          contentType: false,
                          async: false,
                          success: function (res) {
                              console.log(res);
                              layer.msg('删除成功', {icon: 1});
                              obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                          }
                      });
                  });
              } else if (layEvent === 'edit') { //编辑
                  //do something
                  //同步更新缓存对应的值
                  // x_admin_show('编辑优惠券','./coupon-edit.html',1200,600)
                  layer.open({
                      type: 2,
                      area: [1200+'px', 600 +'px'],
                      fix: false, //不固定
                      maxmin: true,
                      shadeClose: true,
                      shade:0.4,
                      title: '编辑优惠券',
                      content: './coupon-edit.html',
                      success: function (layero, index) {
                          var body = layer.getChildFrame('body', index);
                          body.find("#couponname").val(data.couponname);
                          body.find("#coupontype").val(data.coupontype);
                          body.find("#couponprice").val(data.couponprice);
                          body.find("#coupontoprice").val(data.coupontoprice);
                          body.find("#coupondesc").val(data.coupondesc);
                          body.find("#coupondateday").val(data.coupondateday);
                          body.find("#coupondaterange").val(data.coupondaterange);
                          body.find("#couponnum").val(data.couponnum);
                          body.find("#couponlimit").val(data.couponlimit);
                          body.find("#cid").val(data.cid);
                          body.find("#couponImg").attr('src', data.couponimg);

                      }
                  });

              } else if (layEvent === 'paused') { //暂停优惠券
                  $.ajax({
                      type: 'GET',
                      url: "/coupon/updateCouponState/" + cid + "/" + 0,
                      processData: false,
                      contentType: false,
                      async: false,
                      success: function (res) {
                          console.log(res);
                          layer.msg('优惠券已暂停', {icon: 1});
                          couponTable.reload()
                      }
                  })
              }

              /*
                      else if(layEvent === 'del'){ //删除
                      layer.confirm('真的删除行么', function(index){
                      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                      layer.close(index);
                      //向服务端发送删除指令
                      $.ajax({
                        type: 'GET',
                        url: "/coupon/delCoupon/"+cid,
                        processData: false,
                        contentType: false,
                        async: false,
                        success: function (res) {
                          console.log(res);
                          couponTable.reload()
                        }
                      });
                    });
                  }
              **/

          });

      })//layui结束
    </script>
    <script type="text/html" id="imgtmp">
        <img src="{{d.couponimg}}" style="width:80px;height: 50px;">
    </script>
    <script type="text/html" id="statusTemplet">
      {{# if(d.memberstate == 0) { }}
      <button class="layui-btn layui-btn layui-btn-xs">普通用户</button>
      {{# } else { }}
      <button class="layui-btn layui-btn-warm layui-btn-xs">会员用户</button>
      {{# } }}
    </script>
    <script type="text/html" id="couponStateTemplet">
        {{# if(d.couponstate == 0) { }}
        <button class="layui-btn layui-btn-danger layui-btn-xs">不可领取</button>
        {{# } else { }}
        <button class="layui-btn layui-btn-normal layui-btn-xs">可领取</button>
        {{# } }}
    </script>
    <script type="text/html" id="couponTimeTmp">
        {{# if(d.coupondateday == 0) { }}
        <span>{{d.coupondaterange}}</span>
        {{# } else { }}
        <span>{{d.coupondateday}}天内有效</span>
        {{# } }}
    </script>
    <script type="text/html" id="coupondiscount">
        <span>{{d.couponprice}}元(满{{d.coupontoprice}}元可用)</span>
    </script>

  </body>

</html>